<template>
  <section>
    <!--树-->
    <el-tree style="padding:20px;" :data="treedata" :props="defaultProps" ref="treeedit" node-key="id" :indent='60' :accordion="true" :expand-on-click-node="false" :render-content="renderContent">
    </el-tree>

    <!-- 添加 -->
    <el-dialog title="添加" v-model="addFormVisible" :close-on-click-modal="false">
      <el-form :model="addForm" label-width="80px" style="text-align:center;" :rules="addFormRules" ref="addForm">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="20" :md="16" :lg="11">
            <el-form-item label="中文名">
              <el-input v-model="addForm.menuname" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="16" :lg="11">
            <el-form-item label="菜单类型">
              <el-select v-model="addForm.type" style="width:100%;" @change="selectVal" placeholder="请选择类型">
                <el-option label="页面菜单" :disabled="IsSelect1" value="menu"></el-option>
                <el-option label="操作按钮" :disabled="IsSelect2" value="res"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="20" :md="16" :lg="11">
            <el-form-item label="英文名" v-show="inputShow">
              <el-input v-model="addForm.menunameen" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="16" :lg="11">
            <el-form-item label="图标" v-show="inputShow">
              <el-input v-model="addForm.icon" auto-complete="off">
                <el-button slot="append" @click="canurl">参考</el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="20" :md="16" :lg="11">
            <el-form-item label="跳转地址" v-show="inputShow">
              <el-input v-model="addForm.menuurl" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="16" :lg="11">
            <el-form-item label="唯一标识" v-show="thisBtnShow">
              <el-input v-model="addForm.resName" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">确定</el-button>
      </div>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog title="修改" v-model="editFormVisible" width="20%" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="20" :md="16" :lg="nameWidth">
            <el-form-item label="中文名">
              <el-input v-model="editForm.menuname" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="16" :lg="11" v-show="inputShows">
            <el-form-item label="英文名">
              <el-input v-model="editForm.menunameen" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="24" :sm="20" :md="16" :lg="11" v-show="inputShows">
            <el-form-item label="跳转地址">
              <el-input v-model="editForm.menuurl" auto-complete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="20" :md="16" :lg="11" v-show="inputShows">
            <el-form-item label="图标">
              <el-input v-model="editForm.icon" auto-complete="off">
                <el-button slot="append" @click="canurl">参考</el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!--                   <el-form-item label="菜单类型">
                      <el-select v-model="editForm.type"  placeholder="请选择类型">
                          <el-option label="页面菜单" :disabled="IsSelect1" value="menu"></el-option>
                          <el-option label="操作按钮" :disabled="IsSelect2" value="res"></el-option>
                      </el-select>
                  </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">确定</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<script>
import common from '../../common/js/common';
import dateUtil from '../../common/js/dateUtil';
//import NProgress from 'nprogress'
import { allMenuList, addMenu, removeMenu, updateMenuName } from '../../api/api';
import axios from 'axios';
import home from '../../js/home';
export default {
  data() {
    return {
      addFormVisible: false,
      addLoading: false,
      addFormRules: {},

      editFormVisible: false,
      editLoading: false,
      editFormRules: {},
      menuId: '',
      menuIds: '',
      inputShow: true,
      inputShows: true,
      thisBtnShow: true,
      IsSelect1: false,
      IsSelect2: false,
      nameWidth: 11,
      addForm: {
        menuname: '',
        menunameen: '',
        icon: '',
        menuurl: '',
        type: 'menu',
        resName: ''
      },
      editForm: {
        menuname: '',
        menunameen: '',
        icon: '',
        menuurl: ''
      },
      treedata: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }

    }
  },
  methods: {
    canurl() {
      window.open("http://www.yeahzan.com/fa/facss.html")
    },

    getcustoms() {
      let _this = this;
      _this.treedata = [];
      let para = new FormData();
      para.append("pageSize", 10);
      para.append("pageNumber", _this.page);
      _this.listLoading = true;
      //NProgress.start();
      allMenuList().then((res) => {
        var data = res.data.result;
        function gettree(arr, trees) {
          for (var i in arr) {
            if (arr[i].smenu) {
              trees.push({
                id: arr[i].menuid,
                label: arr[i].menuname,
                icon: arr[i].icon,
                menuname: arr[i].menuname,
                menunameen: arr[i].menunameen,
                menuurl: arr[i].menuurl,
                children: []
              });
              for (var k in arr[i].smenu) {
                if (arr[i].smenu[k].resid) {
                  trees[i].children.push({
                    id: arr[i].smenu[k].resid,
                    label: arr[i].smenu[k].resname,
                    resid: arr[i].smenu[k].resid
                  });
                }
              }
              if (!arr[i].smenu[0].resid) {
                gettree(arr[i].smenu, trees[i].children);
              }

            }

            else {
              trees.push({
                id: arr[i].menuid,
                icon: arr[i].icon,
                menuname: arr[i].menuname,
                menunameen: arr[i].menunameen,
                menuurl: arr[i].menuurl,
                label: arr[i].menuname
              });
            }
          }
        }
        gettree(data, _this.treedata);
      });
    },

    selectVal() {
      let _this = this;
      if (_this.addForm.type == "res") {
        _this.inputShow = false;
        _this.thisBtnShow = true;
      }
      else {
        _this.inputShow = true;
        _this.thisBtnShow = false;
      }
    },
    addmuen(data, node) {
      let _this = this;
      let para = new FormData();
      _this.addForm.menuname = '';
      _this.addForm.menunameen = '';
      _this.addForm.menuurl = '';
      _this.addForm.icon = '';
      _this.addFormVisible = true;
      _this.IsSelect1 = false;
      _this.IsSelect2 = false;
      _this.inputShow = true;
      _this.thisBtnShow = false;
      _this.addForm.resName = '';
      _this.menuId = data.id;
      if (node.level == 1) {
        _this.IsSelect2 = true;
      }

      if (data.children && !data.children[0].resid) {
        _this.IsSelect2 = true;
      }

      if (data.children && data.children[0].resid) {
        _this.addForm.type = 'res';
        _this.IsSelect1 = true;
        _this.inputShow = false;
        _this.thisBtnShow = true;
      }
    },

    Delmenu(data) {
      this.$confirm('确认删除该记录吗?', '提示', {
        type: 'warning'
      }).then(() => {
        var type = '';
        if (!data.resid) {
          type = 'menu';
        }
        else {
          type = 'res';
        }
        let para = new FormData();
        para.append("menuId", data.id);
        para.append("type", type);
        removeMenu(para).then((res) => {
          this.$message({
            message: '删除成功',
            type: 'success'
          });
          this.getcustoms();
        });
      }).catch(() => {

      });
    },
    UpdateMenu(data) {
      let _this = this;
      _this.inputShows = true;
      _this.nameWidth = 11;
      _this.editFormVisible = true;
      _this.editForm.menuname = data.menuname;
      _this.editForm.menunameen = data.menunameen;
      _this.editForm.icon = data.icon;
      _this.editForm.menuurl = data.menuurl;
      _this.menuIds = data.id;
      if (data.resid) {
        _this.inputShows = false;
        _this.nameWidth = 22;
      }
    },
    addSubmit: function () {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.addLoading = true;
            let para = new FormData();
            para.append('type', this.addForm.type);
            para.append('menuId', this.menuId);
            para.append('menuname', this.addForm.menuname);
            para.append('menunameen', this.addForm.menunameen);
            para.append('menuurl', this.addForm.menuurl);
            para.append('resName', this.addForm.resName);
            para.append('icon', this.addForm.icon);
            addMenu(para).then((res) => {
              this.addLoading = false;

              // this.$message({
              //   message: '提交成功',
              //   type: 'success'
              // });

              if (res.data.success) {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                });

              } else {
                this.$message({
                  message: res.data.result,
                  type: 'error'
                });
              }

              this.$refs['addForm'].resetFields();
              this.addFormVisible = false;
              this.getcustoms();

            });
          });
        }
      });
    },
    editSubmit: function () {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.$confirm('确认提交吗？', '提示', {}).then(() => {
            this.editLoading = true;
            let para = new FormData();
            para.append('menuId', this.menuIds);
            para.append('menuname', this.editForm.menuname);
            para.append('menunameen', this.editForm.menunameen);
            para.append('menuurl', this.editForm.menuurl);
            para.append('icon', this.editForm.icon);
            updateMenuName(para).then((res) => {
              this.editLoading = false;
              this.$message({
                message: '提交成功',
                type: 'success'
              });

              this.$refs['editForm'].resetFields();
              this.editFormVisible = false;
              this.getcustoms();

            });
          });
        }
      });
    },
    renderContent(h, { node, data, store }) {
      var revertButton = '';
      let _this = this;
      if (node.level == 1) {
        revertButton = <span>
          <span>
            <span>{node.label}</span>
          </span>
          <span style="float: right; margin-right: 20px">
            <el-button style="font-size: 12px;" size="small " type="primary" on-click={
              function () {
                _this.addmuen(data, node);
              }}>添加</el-button>
            <el-button style="font-size: 12px;" size="small " type="warning" on-click={function () {
              _this.UpdateMenu(data);
            }}>修改</el-button>
          </span>
        </span>;
      }
      else if (!data.children && data.resid) {
        revertButton = <span>
          <span>
            <span>{node.label}</span>
          </span>
          <span style="float: right; margin-right: 20px">
            <el-button style="font-size: 12px;" size="small " type="warning" on-click={function () {
              _this.UpdateMenu(data);
            }}>修改</el-button>
            <el-button style="font-size: 12px;" size="small " type="danger" on-click={function () {
              _this.Delmenu(data);
            }}>删除</el-button>
          </span>
        </span>;
      }
      else {
        revertButton = <span>
          <span>
            <span>{node.label}</span>
          </span>
          <span style="float: right; margin-right: 20px">
            <el-button style="font-size: 12px;" size="small " type="primary" on-click={
              function () {
                _this.addmuen(data, node);
              }}>添加</el-button>
            <el-button style="font-size: 12px;" size="small " type="warning" on-click={function () {
              _this.UpdateMenu(data);
            }}>修改</el-button>
            <el-button style="font-size: 12px;" size="small " type="danger" on-click={function () {
              _this.Delmenu(data);
            }}>删除</el-button>
          </span>
        </span>;
      }
      return revertButton;
    }
  },
  mounted() {
    this.getcustoms();
    this.selectVal();
  }
}

</script>

<style scoped>

</style>